<template>
	<div class="footer_div">
		<ul>
			<router-link to="/index" tag="li"  class="footer_li">
				<p class="footIcon" :class="routerIndex?'app_icon_index_b':'app_icon_index_c'"></p>
				<p>首页</p>
			</router-link>
			<router-link to="/destination" tag="li"  class="footer_li">
				<p class="footIcon" :class="routerDis?'app_icon_dis_b':'app_icon_dis_c'"></p>
				<p>目的地</p>
			</router-link>
			<router-link to="/order" tag="li"  class="footer_li">
				<p class="footIcon" :class="routerOrder?'app_icon_order_b':'app_icon_order_c'"></p>
				<p>订单</p>
			</router-link>
			<router-link to="/mine" tag="li"  class="footer_li">
				<p class="footIcon" :class="routerMine?'app_icon_mine_b':'app_icon_mine_c'"></p>
				<p>我的</p>
			</router-link>
		</ul>
	</div>
</template>
<script>
	export default{
		name: 'feet',
		data(){
			return {
				routerIndex:'',
				routerDis:'',
				routerOrder:'',
				routerMine:''
			}
		},
		created:function(){
			//console.log(this)
		},
		methods:{
			// isTab(){
		 //        if(this.$route.path==='/index'){
		 //        	console.log('index')
		 //        	this.routerIndex  = true;
		 //        	this.routerDis  = false;
		 //        	this.routerOrder  = false;
		 //        	this.routerMine  = false;
		 //        }else if(this.$route.path==='/destination'){
		 //        	console.log('destination')
		 //        	this.routerIndex  = false;
		 //        	this.routerDis  = true;
		 //        	this.routerOrder  = false;
		 //        	this.routerMine  = false;
		 //        }else if(this.$route.path==='/order'){
		 //        	console.log('order')
		 //        	this.routerIndex  = false;
		 //        	this.routerDis  = false;
		 //        	this.routerOrder  = true;
		 //        	this.routerMine  = false;
		 //        }else if(this.$route.path==='/mine'){
		 //        	console.log('mine')
		 //        	this.routerIndex  = false;
		 //        	this.routerDis  = false;
		 //        	this.routerOrder  = false;
		 //        	this.routerMine  = true;
		 //        }
		 //      }
		},
		watch:{
			//'$route':'isTab'
		  }
	}

</script>
<style rel="stylesheet"   scoped>
	.footIcon{background:url(../../assets/img/footIcon.png)  no-repeat;}
	.app_icon_order_c{height:25px;width:25px;background-position:0 0;}
	.app_icon_mine_c{height:25px;width:25px;background-position:0 -25px;}
	.app_icon_index_c{height:25px;width:25px;background-position:0 -50px;}
	.app_icon_dis_c{height:25px;width:25px;background-position:0 -75px;}
	.app_icon_dis_b{height:25px;width:25px;background-position:0 -100px;}
	.app_icon_index_b{height:25px;width:25px;background-position:0 -125px;}
	.app_icon_mine_b{height:25px;width:25px;background-position:0 -150px;}
	.app_icon_order_b{height:25px;width:25px;background-position:0 -175px;}
	.footer_div{
		overflow: hidden;
	 	position: fixed;
	 	bottom: 0;
	 	width: 100%;
	 	max-width: 750px;
	 	padding-bottom: 0.1333rem;
	 	background-color: #FFF;
	 	z-index: 2;
	} 
	ul{
 		overflow: hidden;
 		padding-top: 0.1333rem;
 		text-align: center;
	}
	.footer_li{
 			float: left;
 			width: 25%;
 			color: #494949;
 			
 		}
 		.footer_li p:nth-child(1){
 			margin: 0 auto;
 				height: 25px;
 				line-height: 25px !important;
 				font-size: 0.3733rem;
 			}
 			.footer_li p:nth-child(2){
 				height: 0.4rem;
 				line-height: 0.4rem;
 				font-size: 0.32rem;
 				margin-top: 0.0533rem;
 			}
</style>